文章目录

我们通过构造一个简单的列表组件，深入了解组件各环节的运作流程，以下为详细代码：

var List =React.createClass({
        //1、创建阶段
        getDefaultProps:function(){
            //在创建类的时候被调用
            console.log("getDefaultProps");
            return{};
        },
        //2、实例化阶段
        getInitialState:function(){
            //获取this.state的默认值
            console.log("getInitialState");
            return {};
        },
        componentWillMount:function(){
            //在render之前调用此方法
            //业务逻辑的处理都应该放在这里，如对state的操作等
            console.log("componentWillMount");
        },
        render:function(){
            //渲染并返回一个虚拟的DOM
            console.log("render");
            return(
               <div>hello <strong>{this.props.name}</strong></div>
                );
        },
        componentDidMount:function(){
            //该方法发生在render方法之后。在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
            console.log("componentDidMount");
        },
        //3、更新阶段
        componentWillRecieveProps:function(){
            //该方法发生在this.props被修改或父组件调用setProps()方法之后
            console.log("componentWillRecieveProps");
        },
        shouldComponentUpdate:function(){
            //是否需要更新
            console.log("shouldComponentUpdate");
            return true;
        },
        componentWillUpdate:function(){
            //将要更新
            console.log("componentWillUpdate");
        },
        componentDidUpdate:function(){
            //更新完毕
            console.log("componentDidUpdate");
        },
        //4、销毁阶段
        componentWillUnmount:function(){
            //销毁时被调用
            console.log("componentWillUnmount");
        }
    })